<template>
  <div id="my">
    <div id="header">我的
      <van-button color="#ccc" class="btn" size="small" @click="logout">退出</van-button>
    </div>
    <main>
      <div class="main1">
        <div class="box">
          <span>我的订单</span>
          <i class="iconfont icon-jiantou"></i>
        </div>
        <div class="box">
          <span>优惠卷</span>
          <i class="iconfont icon-jiantou"></i>
        </div>
        <div class="box">
          <span>影院会员卡</span>
          <i class="iconfont icon-jiantou"></i>
        </div>
      </div>
      <div class="main2">
        <div class="box">
          <span>想看的电影</span>
          <i class="iconfont icon-jiantou"></i>
        </div>
        <div class="box box1">
          <span>看过的电影</span>
          <i class="iconfont icon-jiantou"></i>
        </div>
      </div>
    </main>
    <footer>
      <bottom></bottom>
    </footer>
  </div>
</template>

<script>
import bottom from "@/components/footer";
export default {
  components: {
    bottom,
  },
  methods:{
    logout() {
      this.$router.push("/login");
      window.sessionStorage.clear();
    },
  }
};
</script>

<style scoped>
#my {
  height: 100%;
  display: flex;
  flex-direction: column;
}
#header {
  height: 0.6rem;
  line-height: 0.6rem;
  font-size: 0.2rem;
  text-align: center;
   border-bottom: 1px solid #999;
}
#header .btn{
  float: right;
  margin: 0.13rem;
}
main {
  flex: 1;
  overflow: scroll;
  background-color: #f6f6f6;
  position: relative;
}
.main1,
.main2 {
  background-color: #fff;
  font-size: 0.15rem;
  border-top: 1px solid #999;
  margin-top: 0.12rem;
}
.main2{
      border-bottom: 1px solid #999;
}
.box {
  height: 0.44rem;
  line-height: 0.44rem;
  border-bottom: 1px solid rgb(182, 182, 182);
  margin-left: 0.12rem;
  font-family: "黑体";
}
.box1{
    border: 0;
}
.box i {
  float: right;
  margin-right: 0.12rem;
  color: #a6a6a6;
}

footer {
  width: 100%;
  height: 0.5rem;
  border-top: 1px solid #ccc;
}
</style>